<template>
    <div class="energy-dashboard">
      <!-- 顶部标题 -->
      <div class="header">
        <h1>智慧能源数据看板</h1>
        <div class="time-range">{{ currentTime }} 实时数据</div>
      </div>
  
      <!-- 数据卡片容器 -->
      <div class="data-cards">
        <StatCard
          title="总用电量"
          value="356,800"
          unit="kWh"
          :percentage="12.5"
          trend="up"
          icon="mdi-flash"
          color="#36a2eb"
        />
        <StatCard
          title="清洁能源占比"
          value="78.6%"
          :percentage="8.2"
          trend="up"
          icon="mdi-leaf"
          color="#4bc0c0"
        />
        <StatCard
          title="碳排放量"
          value="286.3"
          unit="t"
          :percentage="5.3"
          trend="down"
          icon="mdi-factory"
          color="#ff6384"
        />
        <StatCard
          title="能源成本"
          value="¥ 85,600"
          :percentage="3.1"
          trend="down"
          icon="mdi-cash"
          color="#ff9f40"
        />
      </div>
  
      <!-- 主图表区 -->
      <div class="chart-container">
        <div class="main-chart">
          <LineChart :chart-data="energyTrendData" />
        </div>
        <div class="side-charts">
          <div class="chart-box">
            <PieChart :chart-data="energyStructureData" />
          </div>
          <div class="chart-box">
            <BarChart :chart-data="energyCompareData" />
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import StatCard from '@/views/DashBoard/charts/StatCard.vue';
  import LineChart from '@/views/DashBoard/charts/LineChart.vue';
  import PieChart from '@/views/DashBoard/charts/PieChart.vue';
  import BarChart from '@/views/DashBoard/charts/BarChart.vue';
  
  // 类型定义
  interface EnergyData {
    time: string;
    value: number;
  }
  
  // 当前时间
  const currentTime = computed(() => {
    return new Date().toLocaleTimeString('zh-CN', {
      hour: '2-digit',
      minute: '2-digit',
    });
  });
  
  // 模拟数据
  const energyTrendData = ref<EnergyData[]>([
    { time: '00:00', value: 3200 },
    { time: '04:00', value: 2800 },
    { time: '08:00', value: 4500 },
    { time: '12:00', value: 6200 },
    { time: '16:00', value: 5800 },
    { time: '20:00', value: 5100 },
    { time: '24:00', value: 3800 },
  ]);
  
  const energyStructureData = ref({
    categories: ['光伏', '风能', '水电', '储能'],
    data: [
      { value: 4200, name: '光伏' },
      { value: 2800, name: '风能' },
      { value: 3500, name: '水电' },
      { value: 1800, name: '储能' },
    ],
  });
  
  const energyCompareData = ref({
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    data: [6500, 5900, 8000, 8100, 5600, 5500, 4000],
  });
  
  // 自动刷新数据模拟
  onMounted(() => {
    setInterval(() => {
      energyTrendData.value = energyTrendData.value.map((item) => ({
        ...item,
        value: item.value * (0.95 + Math.random() * 0.1),
      }));
    }, 5000);
  });
  </script>
  
  <style lang="scss" scoped>
  .energy-dashboard {
    padding: 2rem;
    background-color: #f5f7fb;
    min-height: 100vh;
  
    .header {
      text-align: center;
      margin-bottom: 2rem;
  
      h1 {
        color: #1a2b50;
        font-size: 2.2rem;
        margin-bottom: 0.5rem;
      }
  
      .time-range {
        color: #666;
        font-size: 1.1rem;
      }
    }
  
    .data-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.5rem;
      margin-bottom: 2rem;
    }
  
    .chart-container {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 1.5rem;
      height: 600px;
  
      .main-chart {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      }
  
      .side-charts {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        height: 100%;
  
        .chart-box {
          flex: 1;
          background: white;
          border-radius: 12px;
          padding: 1rem;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }
      }
    }
  
    @media (max-width: 1200px) {
      .chart-container {
        grid-template-columns: 1fr;
        gap: 1rem;
        height: auto;
  
        .main-chart {
          height: 500px;
        }
  
        .side-charts {
          flex-direction: row;
          flex-wrap: wrap;
          gap: 1rem;
  
          .chart-box {
            flex: 1 1 45%;
          }
        }
      }
    }
  
    @media (max-width: 768px) {
      .data-cards {
        grid-template-columns: 1fr;
      }
    }
  }
  .chart-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
  height: 600px; // 确保父容器有足够的高度

  .main-chart {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    height: 100%; // 确保子容器高度自适应
  }
}
  </style>